<template>
  <div class="reportDetailWrap">
    <div class="informationAddInner" style="font-size: 13px;color: grey;">
      <el-row>
        <el-col :span="6"><div style="line-height: 25px;"><span style="font-weight: bold;">举报时间：</span>{{ruleFormEdit.reportTime}}</div></el-col>
        <el-col :span="6"><div style="line-height: 25px;"><span style="font-weight: bold;">举报编号：</span>{{ruleFormEdit.reportNo}}</div></el-col>
        <el-col :span="6"> <div style="line-height: 25px;"><span style="font-weight: bold;"> 用户手机：</span>{{ruleFormEdit.mobile}}</div></el-col>
        <el-col :span="6"> <div style="line-height: 25px;"><span style="font-weight: bold;"> 举报企业：</span>{{ruleFormEdit.enterpriseName}}
          <span style="float: right;"><router-link to="/reportManage">
          <i class="iconfont icon-fanhui"></i>
        </router-link></span>
        </div></el-col>
        <el-col :span="6"><div style="line-height: 25px;"><span style="font-weight: bold;">处理状态：</span>{{ruleFormEdit.reportStatus == 0 ? '未处理' : ruleFormEdit.reportStatus == 1 ? '已退回' : ruleFormEdit.reportStatus == 2 ? '已处理' : ruleFormEdit.reportStatus == 3 ? '已结案' : ""}} </div></el-col>
        <el-col :span="6"><div v-show="ruleFormEdit.closeTime" style="line-height: 25px;"><span style="font-weight: bold;"> 结案时间：</span>{{ruleFormEdit.closeTime}}</div></el-col>
        <el-col :span="6"> 
          <div style="line-height: 25px;">
            <span style="font-weight: bold;">举报类型：</span><span v-for="(item,index) in ruleFormEdit.reportType" :key="index" style="margin-right: 5px;">{{item==1 ? '乱停乱放' : item==2 ? '损坏车辆' : item==3 ? '其它' : item==4 ? '违规投放' : item==5 ? '区域超量' : ""}}</span><span style="margin-right: 8px;" v-show="ruleFormEdit.hasViolation">违规投放</span>
          </div>
        </el-col>
        <el-col :span="6"> <div style="line-height: 25px;"><span style="font-weight: bold;"> 举报内容：</span>{{ruleFormEdit.reportContent}}</div></el-col>
        <el-col :span="6"> <div style="line-height: 25px;"><span style="font-weight: bold;">经 &nbsp;&nbsp; &nbsp;&nbsp; 度：</span>{{ruleFormEdit.lng}}</div></el-col>
        <el-col :span="6"> <div style="line-height: 25px;"><span style="font-weight: bold;">纬 &nbsp;&nbsp; &nbsp;&nbsp; 度：</span>{{ruleFormEdit.lat}} </div></el-col>
        <el-col :span="6">
          <div style="line-height: 25px;">
            <span style="font-weight: bold;">举报位置：</span>{{ruleFormEdit.districtName}}{{ruleFormEdit.detailAddress}}
          </div>
        </el-col>        
        <el-col :span="24">
          <div v-show="ruleFormEdit.illegal.length>0" style="line-height: 25px; word-break: break-all;">
            <span style="font-weight: bold;"> 违投车辆编号：</span>
            <span v-for="(item,index) in ruleFormEdit.illegal" :key="index" style="margin-right: 10px;">{{item}}</span>
          </div>
        </el-col>       
        <el-col :span="24">
          <div v-show="ruleFormEdit.legal.length>0" style="line-height: 25px; word-break: break-all;">
            <span  style="font-weight: bold;"> 正常车辆编号：</span>
            <span v-for="(item,index) in ruleFormEdit.legal" :key="index" style="margin-right: 10px; word-break: break-all;">{{item}}</span>
          </div>
        </el-col>
        <el-col :span="24">
          <div v-show="ruleFormEdit.reportImages.length>0"
               style="line-height: 25px;"><span
            style="font-weight: bold;vertical-align: top;">举报照片：</span>
            <img v-for="(item,index) in ruleFormEdit.reportImages" :key="index" @click="prviewImg(item.photoUrl)"
                 style="width: 70px;height:70px;border-radius: 5px;cursor: pointer;margin-right: 15px;"
                 :src="item.photoUrl" alt="">
          </div>
        </el-col>
      </el-row>
      <div>
        <setAreaMap :centerLatLng="centerLatLng"></setAreaMap>
      </div>
      <div v-for="(item,index1) in disposeList" :key="index1" style="padding: 5px 0;border-bottom: 1px solid #E2E7ED;">
        <div v-if="item.operateType==1">
          <el-row>
            <el-col :span="4">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 处理企业：</span>{{item.processEnterpriseName}}

              </div>
            </el-col>
            <el-col :span="6">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 处理时间：</span>{{item.processTime}}</div>
            </el-col>

            <el-col :span="4">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 处理人员：</span>{{item.processUserName}}

              </div>
            </el-col>
            <el-col :span="4">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 手机号：</span>{{item.mobile}} </div>
            </el-col>
            <el-col :span="6">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 是否属实：</span>
                {{item.hasTrue==0? '待核实' :item.hasTrue==1? '不属实' :item.hasTrue==2? '重复案件' :item.hasTrue==3? '属实' :""}}

              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div style="line-height: 25px;word-wrap: break-word;"><span style="font-weight: bold;white-space: pre-line;word-break: break-all;word-wrap: break-word;">处理备注：</span>{{item.remark}}</div>
            </el-col>
            <el-col :span="10">
              <div v-show="item.prePhotos.length>0" style="line-height: 25px;padding-top:8px;">
                <span style="font-weight: bold;vertical-align: top;">处理前照片：</span>
                <img v-for="(item1,index) in item.prePhotos" :key="index" @click="prviewImg(item1.photoUrl)"  style="width: 65px;height:65px;border-radius: 5px;cursor: pointer;margin-right: 15px;" :src="item1.photoUrl" alt="">
              </div>
            </el-col>
            <el-col :span="8">
              <div v-show="item.afterPhotos.length>0" style="line-height: 25px;padding-top:8px;">
                <span style="font-weight: bold;vertical-align: top;">处理后照片：</span>
                <img v-for="(item1,index) in item.afterPhotos" :key="index" @click="prviewImg(item1.photoUrl)"
                     style="width: 65px;height:65px;border-radius: 5px;cursor: pointer;margin-right: 15px;"  :src="item1.photoUrl" alt="">
              </div>
            </el-col>
            <el-col v-show="ruleFormEdit.repeatCaseNo" :span="8">
              <div style="line-height: 25px;word-wrap: break-word;"><span style="font-weight: bold;white-space: pre-line;word-break: break-all;word-wrap: break-word;">重复案件编号：</span>{{ruleFormEdit.repeatCaseNo}} </div>
            </el-col>

          </el-row>
        </div>
        <div v-else>
          <el-row v-show="item.operateType==2">
            <el-col :span="4">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 处理状态：</span>已推送</div>
            </el-col>
            <el-col :span="6">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 推送时间：</span>{{item.processTime}}</div>
            </el-col>

            <el-col :span="4">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 推送企业：</span>{{item.pushEnterpriseName}}
              </div>
            </el-col>
            <el-col :span="10">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 备注：</span>{{item.remark}}</div>
            </el-col>
          </el-row>
          <el-row v-show="item.operateType==3">
            <el-col :span="4">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 处理状态：</span>已结案</div>
            </el-col>
            <el-col :span="6">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 结案时间：</span>{{item.processTime}}</div>
            </el-col>

            <el-col :span="12">
              <div style="line-height: 25px;"><span style="font-weight: bold;"> 备注：</span>{{item.remark}}</div>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-row v-if="$store.state.btnMenuIds.indexOf(146)>-1" style="padding-top: 5px;">
        <el-col :span="6">
          <div style="line-height: 30px;"><span style="font-weight: bold;"> 案件审核：</span>
            <el-radio-group v-model="operateType">
              <el-radio :label="1">准予结案</el-radio>
              <el-radio :label="2">推送企业</el-radio>
            </el-radio-group>
          </div>
        </el-col>
        <el-col v-show="operateType==2" :span="4" style="line-height: 30px;padding-right: 10px;">
          <el-select v-model="enterpriseNo" size="mini" clearable placeholder="全部">
            <el-option
              v-for="item in $store.state.companyInfos"
              :key="item.enterpriseNo"
              :label="item.enterpriseName"
              :value="item.enterpriseNo">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="14">
          <div style="line-height: 30px;"><span style="font-weight: bold;"> 备注：</span><span>
            <el-input
              style="width: 85%;"
              autosize
              type="textarea"
              :rows="1"
              placeholder="请输入备注"
              v-model="remark">
            </el-input></span></div>
        </el-col>
      </el-row>
      <div class="buttonWrap">
        <el-button v-if="$store.state.btnMenuIds.indexOf(146)>-1" class="editor-btn" type="primary" @click="submitForm()">确 定
        </el-button>
        <router-link to="/reportManage">
          <el-button style="margin-left: 20px;" class="editor-btn" type="primary">返 回</el-button>
        </router-link>
      </div>
    </div>

  </div>
</template>

<script>
  import setAreaMap from "./setAreaMap.vue"
  export default {
    name: 'editor',
    data() {
      return {
        detailId: this.$route.params.id,
        operateType: 1,
        remark: "",
        enterpriseNo: "",
        allImgs: [],
        centerLatLng: [],
        disposeList: [],
        ruleFormEdit: {
          preImages: [],
          illegal: [],
          legal: [],
          reportImages: [],
          afterImages: [],
          reportNo: "",
          districtId: "",
          mobile: "",
          problemRemark: "",
          openid: "",
          enterpriseNo: "",
          reportStatus: "",
          id: ""
        },

      }
    },
    components: {
      setAreaMap
    },
    created(){
      this.getDetailInfo()
    },
    mounted() {

    },
    methods: {
      prviewImg(url){
        this.$emit("prviewImg", {url: url, allImgs: this.allImgs})
      },
      getDetailInfo(){
        this.allImgs = []
        //初始化显示

        this.axios.post(process.env.API_HOST + '/vehicle/selectCaseDetail', {detailId: this.detailId})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.ruleFormEdit = result.result
              this.centerLatLng = [this.ruleFormEdit.lng, this.ruleFormEdit.lat]
              this.allImgs = this.ruleFormEdit.reportImages
            }
          })

        this.axios.post(process.env.API_HOST + 'vehicle/selectCaseProcess', {detailId: this.detailId})
          .then(response => {
            const result = response.data
            if (result.code == 200) {
              this.disposeList = result.result
              let arr = []
              this.disposeList.forEach((item) => {
                if (item.operateType == 1) {
                  arr = arr.concat(item.afterPhotos, item.prePhotos)
                }
              })
              setTimeout(() => {
                this.allImgs = arr.concat(this.ruleFormEdit.reportImages)
              }, 500)
            }
          })

      },
      //提交回调
      handleCompanyAdd(){
        this.axios.post(process.env.API_HOST + '/vehicle/processCase', {
          detailId: this.detailId,
          operateType: this.operateType,
          remark: this.remark,
          enterpriseNo: this.enterpriseNo,
        })
          .then(response => {
            if (response.data.code === 200) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              });
              setTimeout(() => {
                this.$emit('searchRowsInfo')
                this.$router.push({path: '/reportManage'})
              }, 1000)
            }
          })
          .catch(error => {
            console.log(error);
          });
      },
      submitForm() {
        if (this.operateType == 2 && !this.enterpriseNo) {
          this.$message({
            type: 'info',
            message: '请选择企业！'
          });
          return
        }
        let msg = this.operateType == 1 ? "结案" : "推送"
        this.$confirm('确定' + msg + '该案件？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.handleCompanyAdd()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作！'
          });
        });

      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
    computed: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .reportDetailWrap
    z-index 200
    overflow-y auto
    position absolute
    left 0px
    right 0px
    top 0px
    bottom 0px
    margin 0 auto
    color $fc1
    border-radius 5px
    background-color white
    .titleForInfo
      background-color #3975FE
      color white
      line-height 35px
      font-size 15px
      font-weight bold
      text-align center
      margin-bottom 10px
    .buttonWrap
      margin-top 2%
      text-align center
      width 100%
      line-height 40px;
      .el-button
        width: 100px;
        margin-left 20px
    .informationAddInner
      padding 15px 20px
      .icon-fanhui1
        position absolute
        right 10px
        top 10px

  .iconfont
    font-size: 16px;cursor: pointer;color:#3975FE;
    &:hover
      color #809fe6

</style>
